<template>
	<view class="bgc" :style="{background:'url('+Imgbase+'/'+skin+'_goodpoor_bgc.png)','background-size':'100%',}">
		<view class="padding-bottom-200">
			<view class="padding-top-100">
				<image class="w-80 h-80" :src="Imgbase+'/'+skin+'_goodpoor_img1.png'" mode="aspectFit" @click="back">
				</image>
			</view>


			<view class="Afont padding-top-20 font-34">
				{{info.name}}
			</view>

			<view class="Bfont price_one padding-top-20">
				<view class="">
					￥
				</view>
				<view class="font-46">
					{{info.cost}}
				</view>
			</view>

			<view class="font-22 flex padding-top-20 fenx">
				<view class="padding-5 flex item_one ">
					<text class="padding-left-6">售罄开赏</text>
				</view>

				<view class="flex item_one margin-left-14 padding-5 font-24">
					<!-- <u-count-down style="color: red;" v-if="info.res_time > 0" :time="info.res_time * 1000"
						format="HH:mm:ss"></u-count-down> -->

					<u-count-down :time="info.res_time * 1000" format="HH:mm:ss" autoStart millisecond
						@change="onChange" v-if="info.res_time > 0">
						<view class="time flex ">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</text>
							</view>
						</view>
					</u-count-down>

					<text v-else>已结束禁止购买</text>
				</view>

				<view class="fenx_btn">
					<button class="w-140 h-105"
						style="display: flex;justify-content: right;overflow: hidden;background-color:transparent;"
						open-type="share">
						<image class="w100 h100" mode="aspectFit" :src="Imgbase + '/new_goodinfdex_img4.png'">
						</image>
					</button>
				</view>
			</view>

			<view class="box">
				<view class="flex-between">
					<view class="font-24 font-weight-500">
						赠品预览
					</view>

					<view class="font-20 flex alc">
						<view class="margin-right-15">
							剩余 {{info.has_num}}/{{info.good_num}}
						</view>
						<view class="w-200 heng_one radius-7 h-13 overhid">
							<view class="heng_two h100" :style="[{width:info.has_num/info.good_num*100 + '%'}]">

							</view>
						</view>
					</view>
				</view>

				<view class="margin-top-20">
					<view class="award_box fl margin-bottom-20 font-20" v-for="(item,index) in info.good_list"
						:key="index">
						<view class="w100 radius-10">
							<view class="w100 h-150 pos_re radius-10 overhid"
								@click="onphoto(item.goods_adimage,item.goods_name)">
								<image class="w100 h100 " :src="item.goods_adimage" mode="aspectFill"></image>

								<view class="num padding-5">
									{{(item.number/info.good_num*100).toFixed(3)}}%
								</view>
							</view>

							<view class="w100 one-line padding-top-8">
								{{item.goods_name}}
							</view>

							<view class="w100 padding-top-6">
								{{item.reword_type_text}}赏
							</view>

							<view class="w100 padding-top-6">
								数量: {{item.number}}
							</view>

							<view class="w100 padding-top-6 font-17 jcc_text">
								建议价:{{item.back_price}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="notice box font-22" v-if="info.notice != ''">
				公告：{{info.notice}}
			</view>

			<view class="box font-24">
				<!-- 第一个 -->
				<view class="box_info margin-bottom-25 flex-between">
					<view class="left ">
						规则
					</view>

					<view class="right " @click="show = true">
						详细玩法 >
					</view>
				</view>

				<!-- 第二个 -->
				<view class="box_info margin-bottom-25 flex-between">
					<view class="left">
						结束时间
					</view>

					<view class="center font-weight-500">
						{{info.open_text}}
					</view>

				</view>

			</view>

			<!-- 抽奖记录 -->
			<view class="box bottom_box">
				<view class="">
					<u-subsection fontSize="14" mode="button" :list="cardlist" :current="curNow"
						@change="sectionChange"></u-subsection>
				</view>

				<!-- 选择商品卡 -->
				<view class="" v-if="curNow == 0">
					<view class="padding-top-20 flex-between font-20">
						<view class="">

						</view>

						<view class="flex jcc jcc_text">
							<view class="one_f w-20 h-20 radius-4 margin-right-6">

							</view>
							<view class="">
								可选
							</view>

							<view class="two_f w-20 h-20 radius-4 margin-right-6 margin-left-20">

							</view>
							<view class="">
								已售
							</view>

						</view>
					</view>

					<view class="padding-top-20">
						<view class="fl shop_item h-80 radius-8 margin-bottom-8" v-for="(it,idx) in info.idx_list"
							:key="idx" :class="[it.user_id > 0?'itemoff':'itemon']" @click="selecard(idx)">
							<view class="font-weight-500 padding-left-6 padding-top-6">
								{{it.idx}}
							</view>

							<view class="icon" v-if="it.user_id == 0 && it.type">
								<u-icon name="checkmark-circle-fill" color="#fff" size="22"></u-icon>
							</view>

							<view class="icon font-24 Afont" v-if="it.user_id > 0">
								已售
							</view>
						</view>
					</view>
				</view>

				<!-- 购买记录 -->
				<view class="padding-top-40" v-if="curNow == 1">
					<view class="font-weight-500 text-center font-26" v-if="info.my_idx.length == 0">
						暂无记录
					</view>

					<view v-else class="fl shop_item h-80 radius-8 margin-bottom-8" v-for="(it,idx) in info.my_idx"
						:key="idx" :class="[it.user_id > 0?'itemoff':'itemon']" @click="selecard(idx)">
						<view class="font-weight-500 padding-left-6 padding-top-6">
							{{it}}
						</view>

						<view class="icon">
							<u-icon name="checkmark-circle-fill" color="#fff" size="22"></u-icon>
						</view>

					</view>
				</view>

				<!-- 中奖记录 -->
				<view class="padding-top-40" v-if="curNow == 2">
					<view class="font-weight-500 text-center font-26" v-if="info.open_time == 0">
						暂无记录
					</view>

					<scroll-view scroll-y class="overhid h-800" scroll-with-animation v-else>
						<view class="flex-between padding-bottom-30 Afont" v-for="(item,idx) in info.idx_list"
							:key="idx">
							<view class="flex alc">
								<view class="w-70 h-70 radius-35 overhid">
									<image class="w100 h100" :src="item. avatar" mode="aspectFit"></image>
								</view>

								<view class="infor padding-left-15 padding-bottom-4">
									<view class="name font-24 w-250 one-line">
										{{item.user_name}}
									</view>

									<view class="time font-22 jcc_text padding-top-4">
										{{item.pay_time == 0? '未售出':item.pay_time}}
									</view>
								</view>
							</view>

							<view class="flex alc" @click="onphoto(item. adimage,item.goods_name)">
								<view class="w-70 h-70 radius-10 overhid">
									<image class="w100 h100" :src="item. adimage" mode="aspectFit"></image>
								</view>

								<view class="infor padding-left-15 padding-bottom-4">
									<view class="name font-24 w-200 one-line">
										<text class="">{{item.idx}}.</text>
										{{item.goods_name}}
									</view>

									<view class="time font-22 jcc_text padding-top-4">
										{{item.reword_type_text}}赏
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>

		</view>

		<view class="onbottom w100 h-120 flex-between" v-if="info.open_time == 0">
			<view class="">
				请选择商品卡
			</view>

			<view class="w-200 radius-15 overhid font-weight-500 text-center h-80 lh-80 itemon"
				@click="$u.throttle(buycard, 1000)">
				购买
			</view>
		</view>

		<!-- 玩法说明 -->
		<u-popup :show="show" @close="close" mode="center" closeable :round="10">
			<view class="padding-30 w-700">
				<scroll-view scroll-y class="overhid h-800" scroll-with-animation>
					<view class="text-center font-weight-500 padding-bottom-20">
						{{text.title}}
					</view>

					<u-parse :content="text.content"></u-parse>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 查看奖池图片 -->
		<u-popup :show="photoshow" :round="10" mode="center" @close="photoclose" closeable>
			<view class="w-700 h-800 radius-10 overhid" @click="photoshow = false">
				<view class="w100 h-700">
					<image class="w100 h100 " :src="photourl" mode="aspectFill"></image>
				</view>
				<view class="w100 h-100 lh-96 text-center Afont">
					{{photoname}}
				</view>
			</view>
		</u-popup>

		<u-popup :show="payshow" @close="payclose" mode="bottom" bgColor="transparent">
			<view class="w100 h-720 payup padding-30 Afont"
				:style="{background:'url('+Imgbase+'/new_goodinfdex_pay1.png)','background-size':'100% 100%',}">

				<view class="text-lg padding-top-150 Bfont price" style="color: #E60000;">
					￥<text class="font-45 padding-left-10">{{Number(info.cost * paynum).toFixed(2)}}</text>
				</view>

				<view class="padding-top-5 font-26">
					单价({{info.cost}}/次)
				</view>

				<view class="padding-top-5 font-26">
					购买次数{{paynum}}次
				</view>

				<view class="w100 padding-20 margin-top-40" 
					:style="{background:'url('+Imgbase+'/new_goodinfdex_pay4.png)','background-size':'100% 100%',}">
					<view class="flex-between" v-if="coupon > 0">
						<view class="">剩余{{Math.floor(coupon * 1000) / 100}}GOOD豆
							(可抵值{{ Math.floor(coupon * 100) / 100}})</view>

						<view class=" w-40 h-40 radius-20 margin-right-8 flex-center"
							style="border: 4rpx solid #8E4E0D;background-color: #fff;" @click="radioChange">
							<view class="w-24 h-24 radius-12" style="background-color: #5F9764;" v-if="checked == 1">

							</view>
						</view>
					</view>
				</view>


				<view class="w100 padding-20 margin-top-30"
					:style="{background:'url('+Imgbase+'/new_goodinfdex_pay3.png)','background-size':'100% 100%',}">
					<view class="flex-between">
						<view class="">需支付</view>
						<view class=" text-lg" style="color: #e66142;">
							￥{{price_fai}}</view>
					</view>
					<view class="flex-between padding-top-15">
						<view class="">剩余余额</view>
						<view class=" text-lg" style="color: #e66142;">￥{{money}}</view>
					</view>
				</view>

				<view class="text-center padding-top-30">
					<image class="w-280 h-90" :src="Imgbase + '/new_goodinfdex_pay2.png'" @click="buycard(1)"
						mode="aspectFit">
					</image>
				</view>

			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				skin: 'classics',
				id: 0,
				info: {
					name: '',
					cost: '',
					has_num: '',
					good_num: '',
					good_list: [],
					open_text: '',
					notice: '',
					idx_list: [],
					open_time: -1,
					my_idx: []
				},
				text: '',
				show: false,
				photoshow: false,
				photourl: '',
				photoname: '',
				cardlist: ['选择商品卡', '购买记录', '中奖记录'],
				curNow: 0,
				timeData: {},
				payshow: false,
				paynum: 0,
				money: 0,
				pagesCount: 0,
				coupon: 0,
				coupon_s: 0,
				checked: 0,
				price_fai: 0
			}
		},
		onLoad(e) {
			this.id = e.id

			let pages = getCurrentPages();
			this.pagesCount = pages.length;
		},
		onShow() {
			if (uni.getStorageSync('skin')) {
				this.skin = uni.getStorageSync('skin')
			}
			this.getSkin()
			this.poorDesc()
			this.explain()
			this.userFront()
		},
		// 分享
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.info.name,
				path: '/pagesA/GoodAward/detail?id=' + _this.id,
				imageUrl: _this.info.adimage,
			}
		},
		methods: {
			// 是否使用good豆
			radioChange() {
				let _this = this;
				if (_this.checked == 0) { // 使用good豆
					_this.checked = 1
					_this.coupon_s = _this.coupon

				} else { // 不使用good豆
					_this.checked = 0
					_this.coupon_s = 0
				}
				console.log(_this.coupon_s)

				this.price_fai = Number(this.info.cost * this.paynum - _this.coupon_s).toFixed(2)
				console.log(this.price_fai)
			},
			// 获取个人信息
			async userFront() {
				let _this = this;
				let item = await this.$api.post('Userways/userFront', {
					token: uni.getStorageSync('token'),
				})
				_this.money = item.data.user_desc.money;
				_this.coupon = item.data.user_desc.coupon / 10;
			},
			payclose() {
				this.payshow = false
			},
			onChange(e) {
				this.timeData = e
			},
			sectionChange(index) {
				this.curNow = index;
				this.poorDesc()
			},
			// 购买
			buycard(i) {
				let _this = this;
				var res = '',
					num = 0
				this.info.idx_list.forEach((it, idx) => {
					if (res != '' && it.type) {
						res += ',';
					}

					if (it.type) {
						res += it.idx;
						num++
					}

				})
				_this.paynum = num

				if (i == 1) { // 购买
					_this.payshow = false
					_this.poorJoin(res)
				} else { //弹窗
					if (res == '') {
						_this.gobottom()
					} else {
						_this.radioChange()
						_this.payshow = true
					}
				}
			},
			// 购买接口
			async poorJoin(res) {
				let _this = this;
				let item = await this.$api.post('Seats/poorJoin', {
					token: uni.getStorageSync('token'),
					poor_id: _this.id,
					idx: res
				})

				if (item.code == 1) {
					this.$refs.uToast.show({
						message: item.msg,
					})
				}
				setTimeout(() => {
					_this.poorDesc()
					_this.$forceUpdate()
				}, 100)


			},
			// 选择商品卡
			selecard(i) {
				let card = this.info.idx_list[i]
				if (card.user_id == 0) {
					this.info.idx_list[i].type = !this.info.idx_list[i].type
				}
			},
			// 查看奖池图片
			onphoto(url, name) {
				this.photourl = url
				this.photoname = name
				this.photoshow = true
			},
			// 关闭查看奖池图片
			photoclose() {
				this.photoshow = false
			},
			// 关闭玩法说明弹窗
			close() {
				this.show = false
			},
			// 滑到页面最底部
			gobottom() {
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 500, //滚动动画的时长，默认300ms，单位 ms
						selector: '.bottom_box'
					});
				}, 100)
				this.$refs.uToast.show({
					message: "请选择商品卡",
					duration: 1000
				})
			},
			// 玩法说明
			async explain() {
				let _this = this;
				let item = await this.$api.post('Index/explain', {
					id: 23,
				})
				_this.text = item.data.desc;
			},
			// 奖池详情
			async poorDesc() {
				let _this = this;
				let item = await this.$api.post('Seats/poorDesc', {
					token: uni.getStorageSync('token'),
					poor_id: _this.id
				})
				_this.info = item.data.info
			},
			// 查看当前皮肤
			async getSkin() {
				let item = await this.$api.post('user/Skins', {
					token: uni.getStorageSync('token'),
				})
				uni.setStorageSync('skin', item.data.skin);
				this.skin = item.data.skin
			},
			back() {
				console.log(this.pagesCount)
				if (this.pagesCount == 1) {
					uni.switchTab({
						url: '/pages/goodspoor/index'
					})
				} else {
					uni.navigateBack()
				}
			}
		},

	}
</script>

<style lang="less" scoped>
	.fenx {
		position: relative;

		.fenx_btn {
			position: absolute;
			right: 0;
			bottom: -20rpx;
		}
	}

	.payup {
		color: #8E4E0D;
	}

	.bottom_box {
		min-height: 500rpx;
	}

	.pos_re {
		position: relative;
		// border: 2rpx solid #F96565;

		.num {
			position: absolute;
			top: 0;
			right: 0;
			background-color: rgba(0, 0, 0, .5);
			color: #fff;
		}
	}

	.heng_one {
		background-color: #e1e1e1;
		position: relative;
	}

	.heng_two {
		background-color: #F96565;
		position: absolute;
		top: 0;
		left: 0;
		transition: .5s;
	}

	.itemon {
		background-color: #FA6465;
		color: #fff;
	}

	.itemoff {
		background-color: #E8E8E8;
		color: #BCBCBC;
	}

	.shop_item {
		width: 11%;
		margin-right: 1.71%;
		position: relative;

		.icon {
			position: absolute;
			bottom: 6rpx;
			right: 6rpx;
		}
	}


	.shop_item:nth-child(8n) {
		margin-right: 0;
	}

	.jcc_text {
		color: #989898;
	}

	.one_f {
		background-color: #F96565;
	}

	.two_f {
		background-color: #c7c7c7;
	}

	.box_info {

		.left {
			width: 150rpx;
			color: #989898;
		}

		.center {
			color: #000;
		}

		.right {
			color: #999;
			font-weight: bold;
		}
	}

	.box {
		background-color: #fff;
		padding: 25rpx;
		margin-top: 30rpx;
		border-radius: 15rpx;
		width: 100%;
		overflow: hidden;
	}

	.notice {
		color: #989898;
	}

	.onbottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.award_box {
		width: 18%;
		margin-right: 2.5%;
	}

	.award_box:nth-child(5n) {
		margin-right: 0;
	}

	.item_one {
		color: #ff0000;
		border: 2rpx solid #ff0000;
		border-radius: 6rpx;
	}

	.price_one {
		color: #ff0000;
		display: flex;
		align-items: baseline;
	}

	.bgc {
		background-color: #F7F2E8;
		min-height: 100vh;
		padding: 0 20rpx;
	}
</style>